<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>班级点名系统</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1 id="class-name">请选择学生名单文件</h1>
            <div class="file-input-container">
                <input type="file" id="file-input" accept=".txt" />
                <label for="file-input" class="file-label">选择学生名单文件</label>
            </div>
        </header>
        
        <main>
            <div class="button-container">
                <button id="roll-btn" class="roll-btn"><span>开始点名</span></button>
            </div>
            
            <div id="animation-area" class="animation-area">
                <!-- 名字动画区域 -->
            </div>
            
            <div id="result-container" class="result-container">
                <div id="result" class="result"></div>
                <div id="meme-text" class="meme-text"></div>
            </div>
        </main>
        
        <footer>
            <p>让课堂更有趣</p>
        </footer>
    </div>

    <audio id="roll-sound" src="sounds/roll.mp3" preload="auto"></audio>
    <audio id="finish-sound" src="sounds/finish.mp3" preload="auto"></audio>

    <script src="script.js"></script>
</body>
</html> 